<template>
  <div class="h-100">
    <div class="h-100 card rela flex flex-col">
      <div class="type-group-seat"></div>
      <div class="type-group">
        <div class="dropdown flex flex-between">
          <el-select
            class="select-style"
            @change="selectType"
            placeholder="部件类别"
            v-model="type"
          >
            <el-option
              :key="item.typeTopId"
              :label="item.typeTopName"
              :value="item.typeTopId"
              v-for="item in typeList"
            >
            </el-option>
          </el-select>
          <div class="checkbox-style" @click="selectShowLaw">
            <div class="checkbox-title rela" :class="isShowLaw ? 'on' : ''">
              显示案件
              <img v-if="isShowLaw" src="@assets/images/bujianMap/check.png" />
            </div>
          </div>
        </div>
      </div>

      <div class="list-group flex-1">
        <template v-for="(item, index) in itemList">
          <div :key="index" @click="selectList(item)">
            <div v-if="index == 0" class="line"></div>
            <div
              class="list-item flex flex-between"
              :class="checkId == item.typeSubId ? 'on' : ''"
            >
              <div class="flex flex-1">
                <div class="icon">
                  <i class="iconfont icon-size" :class="item.imgIcon"></i>
                </div>
                <div class="title">{{ item.typeSubName }}</div>
              </div>
              <div v-if="checkId == item.typeSubId" class="arrow-right">
                <img src="@assets/images/bujianMap/arrow-right.png" alt="" />
              </div>
            </div>
            <div class="line"></div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/untils/bus";
import { queryBujianTypeList } from "@/api";

export default {
  props: {},
  data() {
    return {
      type: "", // 部件类别
      isShowLaw: false, // 显示案件
      typeList: [],
      selectTypeObj: {
        // typeTopId
        // typeTopName
      },

      checkItem: {},
      checkId: "",
      itemList: [
        // imgIcon
        // typeSubId
        // typeSubName
      ],
    };
  },
  created() {
    this.getTypeList();
  },
  methods: {
    //获取左侧列表数据
    getTypeList() {
      queryBujianTypeList({
        typeTopId: 1,
      }).then((res) => {
        this.typeList = res || [];
        if (this.typeList.length > 0) {
          const { typeTopId, typeTopName } = this.typeList[0];
          this.type = typeTopId;
          this.selectTypeObj = { typeTopId, typeTopName };
          this.itemList = this.deepCopy(
            this.typeList[0].fuMenuResultList || []
          );
        }
      });
    },
    //公共设施框变化触发的函数
    selectType(res) {
      const arr = this.typeList.filter((item) => item.typeTopId == res);
      this.itemList = this.deepCopy(arr[0].fuMenuResultList || []);
      this.selectTypeObj = {
        typeTopId: arr[0].typeTopId,
        typeTopName: arr[0].typeTopName,
      };
    },
    //显示案例开关
    selectShowLaw() {
      this.isShowLaw = !this.isShowLaw;
      this.emitParamChange();
    },
    // 显示案例互斥展示，向父组件传值，意义未知。
    emitParamChange() {
      const { type, isShowLaw, selectTypeObj, checkItem } = this;
      this.$emit("paramChange", {
        type,
        isShowLaw,
        typeTopId: selectTypeObj.typeTopId,
        typeTopName: selectTypeObj.typeTopName,
        typeSubId: checkItem.typeSubId,
        typeSubName: checkItem.typeSubName,
      });
    },
    //具体选择设备
    selectList(item) {
      this.checkItem = item;
      this.checkId = item.typeSubId;
      //向Nav页传值，进行点位标记
      Bus.$emit("bujianMapUpdatePoint", item);
    },
    deepCopy(data) {
      const res = data instanceof Array ? [] : {};
      for (const key in data) {
        if (data.hasOwnProperty(key)) {
          res[key] =
            data[key] instanceof Object ? this.deepCopy(data[key]) : data[key];
        }
      }
      return res;
    },
  },
};
</script>

<style lang="less" scoped>
::-webkit-scrollbar{
  width: 0;
}
.h-100 {
  height: 100%;
}
.rela {
  position: relative;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-1 {
  flex: 1;
}
.flex-center {
  justify-content: center;
  align-items: center;
}
.flex-item {
  align-items: center;
}
.flex-between {
  justify-content: space-between;
}
/deep/ .select-style input {
  width: 160px;
  height: 44px;
  background: rgba(4, 11, 32, 0.7);
  border: 1px solid #16d0ff;
  box-shadow: 0px 0px 19px 1px #173c90;
  border-radius: 8px;
}
.checkbox-style {
  width: 160px;
  height: 44px;
  background: rgba(4, 11, 32, 0.7);
  border: 1px solid #16d0ff;
  -webkit-box-shadow: 0px 0px 19px 1px #173c90;
  box-shadow: 0px 0px 19px 1px #173c90;
  border-radius: 8px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  .checkbox-title {
    color: #dcdfe6;
    font-size: 14px;
    font-weight: 400;
    padding-left: 15px;
    text-align: left;
    &.on {
      color: #00acff;
    }
    img {
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }
}
.type-group-seat {
  height: 60px;
}
.type-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
}

.list-group {
  overflow-y: auto;
  .list-item {
    width: 100%;
    height: 46px;
    background: linear-gradient(
      270deg,
      rgba(46, 81, 210, 0) 0%,
      rgba(54, 97, 255, 0.4) 50%,
      rgba(46, 81, 210, 0) 100%
    );
    padding: 0 30px 0 60px;
    cursor: pointer;
    align-items: center;
    &.on {
      background: linear-gradient(
        90deg,
        rgba(46, 81, 210, 0) 0%,
        rgba(54, 97, 255, 0.9) 50%,
        rgba(46, 81, 210, 0) 100%
      );
      .title {
        color: #dafcff;
        font-size: 18px;
      }
    }
    .icon {
      /*width: 24px;*/
      width: 47px;
      height: 24px;
      /*margin-right: 33px;*/
      color: #fff;
      /*opacity: 0.6;*/
      display: flex;
      align-items: center;
      .icon-size {
          font-size: 24px;
      }
    }
    .title {
      font-size: 16px;
      font-family: ShiShangZhongHeiJianTi;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      align-items: center;
      /*opacity: 0.6;*/
    }
    .arrow-right {
        display: flex;
        align-items: center;
    }
  }
  .line {
    width: 100%;
    height: 1px;
    margin: 3px 0;
    background: linear-gradient(
      90deg,
      rgba(0, 250, 240, 0) 0%,
      #00faf0 50%,
      rgba(0, 250, 240, 0) 100%
    );
  }
}
</style>
